<!DOCTYPE html>
<html lang="en">

	<head>
		<!-- Required meta tags-->
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta name="description" content="au theme template">
		<meta name="author" content="Hau Nguyen">
		<meta name="keywords" content="au theme template">

		<!-- Title Page-->
		<title>网页设计与制作仿真效果操作网站-盒子模型</title>

		<!-- Fontfaces CSS-->
		<link href="../css/font-face.css" rel="stylesheet" media="all">
		<link href="../vendor/font-awesome-4.7/css/font-awesome.min.css" rel="stylesheet" media="all">
		<link href="../vendor/font-awesome-5/css/fontawesome-all.min.css" rel="stylesheet" media="all">
		<link href="../vendor/mdi-font/css/material-design-iconic-font.min.css" rel="stylesheet" media="all">

		<!-- Bootstrap CSS-->
		<link href="../vendor/bootstrap-4.1/bootstrap.min.css" rel="stylesheet" media="all">

		<!-- Vendor CSS-->
		<!-- <link href="../vendor/animsition/animsition.min.css" rel="stylesheet" media="all"> -->
		<link href="../vendor/bootstrap-progressbar/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet" media="all">
		<link href="../vendor/wow/animate.css" rel="stylesheet" media="all">
		<link href="../vendor/css-hamburgers/hamburgers.min.css" rel="stylesheet" media="all">
		<link href="../vendor/slick/slick.css" rel="stylesheet" media="all">
		<link href="../vendor/select2/select2.min.css" rel="stylesheet" media="all">
		<link href="../vendor/perfect-scrollbar/perfect-scrollbar.css" rel="stylesheet" media="all">

		<!-- Main CSS-->
		<link href="../css/theme.css" rel="stylesheet" media="all">
		<link rel="stylesheet" type="text/css" href="../css/boc_con.css" />
		<link rel="stylesheet" type="text/css" href="../css/flex.css" />
	</head>
	<body class="animsition">
		<div class="page-wrapper">
			<!-- MENU SIDEBAR-->
			<aside class="menu-sidebar d-none d-lg-block">
				<div class="logo">
					<a href="#">
						<img src="../images/icon/logo.png" alt="Cool Admin" />
					</a>
				</div>
			<div class="menu-sidebar__content js-scrollbar1">
					<nav class="navbar-sidebar">
						<ul class="list-unstyled navbar__list">
							<li class="active has-sub">
								<a class="js-arrow" href="index.html">
									<i class="fas fa-tachometer-alt"></i>我的信息</a>
								<ul class="list-unstyled navbar__sub-list js-sub-list">
									<li>
										<a href="askqustion.html">我的问题</a>
									</li>
									<li>
										<a href="index.html">我的数据</a>
									</li>
							
								</ul>
							</li>
							<li class="active has-sub">
								<a class="js-arrow" href="#">
									<i class="fas fa-tachometer-alt"></i>项目1html标签</a>
								<ul class="list-unstyled navbar__sub-list js-sub-list">
									<li>
										<a href="htmlControl.html"><i class="fas fa-cog"></i>实训操作练习</a>
									</li>
									<li>
										<a href="htmltest.html"><i class="fas fa-file"></i>测试练习</a>
									</li>
			
								</ul>
							</li>
							<li class="has-sub">
								<a class="js-arrow" href="#">
									<i class="fas fa-tachometer-alt"></i>项目2CSS样式</a>
								<ul class="list-unstyled navbar__sub-list js-sub-list">
									<li>
										<a href="CSSControl.html"><i class="fas fa-cog"></i>实训操作练习</a>
									</li>
									<li>
										<a href="CSStest.html"><i class="fas fa-file"></i>测试练习</a>
									</li>
			
								</ul>
							</li>
			
							<li class="has-sub">
								<a class="js-arrow" href="#">
									<i class="fas fa-desktop"></i>项目3盒子模型</a>
								<ul class="list-unstyled navbar__sub-list js-sub-list">
									<li>
										<a href="boxControl.html"><i class="fas fa-cog"></i>实训操作练习</a>
									</li>
									<li>
										<a href="boxtest.html"><i class="fas fa-file"></i>测试练习</a>
									</li>
			
								</ul>
							</li>
							<li class="has-sub">
								<a class="js-arrow" href="#">
									<i class="fas fa-align-justify"></i>项目4弹性布局</a>
			
								<ul class="list-unstyled navbar__sub-list js-sub-list">
									<li>
										<a href="flexControl.html"><i class="fas fa-cog"></i>实训操作练习</a>
									</li>
									<li>
										<a href="transformtest.html"><i class="fas fa-file"></i>测试练习</a>
									</li>
			
								</ul>
			
							</li>
							<li class="has-sub">
								<a class="js-arrow" href="#">
									<i class="fas fa-square"></i>项目5背景与外观</a>
								<ul class="list-unstyled navbar__sub-list js-sub-list">
									<li>
										<a href="backgroundControl.html"><i class="fas fa-cog"></i>实训操作练习</a>
									</li>
									<li>
										<a href="backgtest.html"><i class="fas fa-file"></i>测试练习</a>
									</li>
			
								</ul>
							</li>
							<li class="has-sub">
								<a class="js-arrow" href="#">
									<i class="fas fa-pie-chart"></i>项目6精灵图设置</a>
								<ul class="list-unstyled navbar__sub-list js-sub-list">
									<li>
										<a href="spriteControl.html"><i class="fas fa-cog"></i>实训操作练习</a>
									</li>
									<li>
										<a href="spritetest.html"><i class="fas fa-file"></i>测试练习</a>
									</li>
			
								</ul>
							</li>
							<li class="has-sub">
								<a class="js-arrow" href="#">
									<i class="fas fa-spinner fa-pulse"></i>项目7动画技术</a>
			
								<ul class="list-unstyled navbar__sub-list js-sub-list">
									<li>
										<a href="animateControl.html"><i class="fas fa-cog"></i>实训操作练习</a>
									</li>
									<li>
										<a href="animatetest.html"><i class="fas fa-file"></i>测试练习</a>
									</li>
			
								</ul>
			
							</li>
							<li class="has-sub">
								<a class="js-arrow" href="#">
									<i class="fas fa-adjust"></i>项目8变形与过渡</a>
								 
			
								<ul class="list-unstyled navbar__sub-list js-sub-list">
									<li>
										<a href="transformControl.html"><i class="fas fa-cog"></i>实训操作练习</a>
									</li>
									<li>
										<a href="transformtest.html"><i class="fas fa-file"></i>测试练习</a>
									</li>
			
								</ul>
			
							</li>
						</ul>
					</nav>
				</div>
			
			
				</aside>
			<!-- END MENU SIDEBAR-->

			<!-- PAGE CONTAINER-->
			<div class="page-container">
				<header class="header-desktop">
					<div class="section__content section__content--p30">
						<div class="container-fluid">
							<div class="header-wrap">
								<form class="form-header" action="" method="POST">
									<input class="au-input au-input--xl" type="text" name="search" placeholder="Search for datas &amp; reports..." />
									<button class="au-btn--submit" type="submit">
										<i class="zmdi zmdi-search"></i>
									</button>
								</form>
								<div class="header-button">
									<div class="noti-wrap">
										<div class="noti__item js-item-menu">
											<i class="zmdi zmdi-comment-more"></i>
											<span class="quantity">1</span>
											<div class="mess-dropdown js-dropdown">
												<div class="mess__title">
													<p>You have 2 news message</p>
												</div>
												<div class="mess__item">
													<div class="image img-cir img-40">
														<img src="../images/icon/avatar-06.jpg" alt="Michelle Moreno" />
													</div>
													<div class="content">
														<h6>Michelle Moreno</h6>
														<p>Have sent a photo</p>
														<span class="time">3 min ago</span>
													</div>
												</div>
												<div class="mess__item">
													<div class="image img-cir img-40">
														<img src="../images/icon/avatar-04.jpg" alt="Diane Myers" />
													</div>
													<div class="content">
														<h6>Diane Myers</h6>
														<p>You are now connected on message</p>
														<span class="time">Yesterday</span>
													</div>
												</div>
												<div class="mess__footer">
													<a href="#">View all messages</a>
												</div>
											</div>
										</div>
										<div class="noti__item js-item-menu">
											<i class="zmdi zmdi-email"></i>
											<span class="quantity">1</span>
											<div class="email-dropdown js-dropdown">
												<div class="email__title">
													<p>You have 3 New Emails</p>
												</div>
												<div class="email__item">
													<div class="image img-cir img-40">
														<img src="../images/icon/avatar-06.jpg" alt="Cynthia Harvey" />
													</div>
													<div class="content">
														<p>Meeting about new dashboard...</p>
														<span>Cynthia Harvey, 3 min ago</span>
													</div>
												</div>
												<div class="email__item">
													<div class="image img-cir img-40">
														<img src="../images/icon/avatar-05.jpg" alt="Cynthia Harvey" />
													</div>
													<div class="content">
														<p>Meeting about new dashboard...</p>
														<span>Cynthia Harvey, Yesterday</span>
													</div>
												</div>
												<div class="email__item">
													<div class="image img-cir img-40">
														<img src="../images/icon/avatar-04.jpg" alt="Cynthia Harvey" />
													</div>
													<div class="content">
														<p>Meeting about new dashboard...</p>
														<span>Cynthia Harvey, April 12,,2018</span>
													</div>
												</div>
												<div class="email__footer">
													<a href="#">See all emails</a>
												</div>
											</div>
										</div>
										<div class="noti__item js-item-menu">
											<i class="zmdi zmdi-notifications"></i>
											<span class="quantity">3</span>
											<div class="notifi-dropdown js-dropdown">
												<div class="notifi__title">
													<p>You have 3 Notifications</p>
												</div>
												<div class="notifi__item">
													<div class="bg-c1 img-cir img-40">
														<i class="zmdi zmdi-email-open"></i>
													</div>
													<div class="content">
														<p>You got a email notification</p>
														<span class="date">April 12, 2018 06:50</span>
													</div>
												</div>
												<div class="notifi__item">
													<div class="bg-c2 img-cir img-40">
														<i class="zmdi zmdi-account-box"></i>
													</div>
													<div class="content">
														<p>Your account has been blocked</p>
														<span class="date">April 12, 2018 06:50</span>
													</div>
												</div>
												<div class="notifi__item">
													<div class="bg-c3 img-cir img-40">
														<i class="zmdi zmdi-file-text"></i>
													</div>
													<div class="content">
														<p>You got a new file</p>
														<span class="date">April 12, 2018 06:50</span>
													</div>
												</div>
												<div class="notifi__footer">
													<a href="#">All notifications</a>
												</div>
											</div>
										</div>
									</div>
									<div class="account-wrap">
										<div class="account-item clearfix js-item-menu">
											<div class="image">
												<img src="../images/icon/avatar-01.jpg" alt="***" />
											</div>
											<div class="content">
												<a class="js-acc-btn" href="#">***</a>
											</div>
											<div class="account-dropdown js-dropdown">
												<div class="info clearfix">
													<div class="image">
														<a href="#">
															<img src="../images/icon/avatar-01.jpg" alt="***" />
														</a>
													</div>
													<div class="content">
														<h5 class="name">
															<a href="#">***</a>
														</h5>
														<span class="email">johndoe@example.com</span>
													</div>
												</div>
												<div class="account-dropdown__body">
													<div class="account-dropdown__item">
														<a href="#">
															<i class="zmdi zmdi-account"></i>Account</a>
													</div>
													<div class="account-dropdown__item">
														<a href="#">
															<i class="zmdi zmdi-settings"></i>Setting</a>
													</div>
													<div class="account-dropdown__item">
														<a href="#">
															<i class="zmdi zmdi-money-box"></i>Billing</a>
													</div>
												</div>
												<div class="account-dropdown__footer">
													<a href="#">
														<i class="zmdi zmdi-power"></i>Logout</a>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</header>
				<!-- HEADER DESKTOP-->

				<!-- MAIN CONTENT-->
				<div class="main-content">
					<!-- HEADER DESKTOP-->
					<header class="header-desktop" style="">
						<div class="section__content section__content--p30">
							<div class="container-fluid">
								<div class="header-wrap">
									<form class="form-header" action="" method="POST">
										<input class="au-input au-input--xl" type="text" name="search" placeholder="Search for datas &amp; reports..." />
										<button class="au-btn--submit" type="submit">
											<i class="zmdi zmdi-search"></i>
										</button>
									</form>
									<div class="header-button">
										<div class="noti-wrap">
											<div class="noti__item js-item-menu">
												<i class="zmdi zmdi-comment-more"></i>
												<span class="quantity">1</span>
												<div class="mess-dropdown js-dropdown">
													<div class="mess__title">
														<p>You have 2 news message</p>
													</div>
													<div class="mess__item">
														<div class="image img-cir img-40">
															<img src="../images/icon/avatar-06.jpg" alt="Michelle Moreno" />
														</div>
														<div class="content">
															<h6>Michelle Moreno</h6>
															<p>Have sent a photo</p>
															<span class="time">3 min ago</span>
														</div>
													</div>
													<div class="mess__item">
														<div class="image img-cir img-40">
															<img src="../images/icon/avatar-04.jpg" alt="Diane Myers" />
														</div>
														<div class="content">
															<h6>Diane Myers</h6>
															<p>You are now connected on message</p>
															<span class="time">Yesterday</span>
														</div>
													</div>
													<div class="mess__footer">
														<a href="#">View all messages</a>
													</div>
												</div>
											</div>
											<div class="noti__item js-item-menu">
												<i class="zmdi zmdi-email"></i>
												<span class="quantity">1</span>
												<div class="email-dropdown js-dropdown">
													<div class="email__title">
														<p>You have 3 New Emails</p>
													</div>
													<div class="email__item">
														<div class="image img-cir img-40">
															<img src="../images/icon/avatar-06.jpg" alt="Cynthia Harvey" />
														</div>
														<div class="content">
															<p>Meeting about new dashboard...</p>
															<span>Cynthia Harvey, 3 min ago</span>
														</div>
													</div>
													<div class="email__item">
														<div class="image img-cir img-40">
															<img src="../images/icon/avatar-05.jpg" alt="Cynthia Harvey" />
														</div>
														<div class="content">
															<p>Meeting about new dashboard...</p>
															<span>Cynthia Harvey, Yesterday</span>
														</div>
													</div>
													<div class="email__item">
														<div class="image img-cir img-40">
															<img src="../images/icon/avatar-04.jpg" alt="Cynthia Harvey" />
														</div>
														<div class="content">
															<p>Meeting about new dashboard...</p>
															<span>Cynthia Harvey, April 12,,2018</span>
														</div>
													</div>
													<div class="email__footer">
														<a href="#">See all emails</a>
													</div>
												</div>
											</div>
											<div class="noti__item js-item-menu">
												<i class="zmdi zmdi-notifications"></i>
												<span class="quantity">3</span>
												<div class="notifi-dropdown js-dropdown">
													<div class="notifi__title">
														<p>You have 3 Notifications</p>
													</div>
													<div class="notifi__item">
														<div class="bg-c1 img-cir img-40">
															<i class="zmdi zmdi-email-open"></i>
														</div>
														<div class="content">
															<p>You got a email notification</p>
															<span class="date">April 12, 2018 06:50</span>
														</div>
													</div>
													<div class="notifi__item">
														<div class="bg-c2 img-cir img-40">
															<i class="zmdi zmdi-account-box"></i>
														</div>
														<div class="content">
															<p>Your account has been blocked</p>
															<span class="date">April 12, 2018 06:50</span>
														</div>
													</div>
													<div class="notifi__item">
														<div class="bg-c3 img-cir img-40">
															<i class="zmdi zmdi-file-text"></i>
														</div>
														<div class="content">
															<p>You got a new file</p>
															<span class="date">April 12, 2018 06:50</span>
														</div>
													</div>
													<div class="notifi__footer">
														<a href="#">All notifications</a>
													</div>
												</div>
											</div>
										</div>
										<div class="account-wrap">
											<div class="account-item clearfix js-item-menu">
												<div class="image">
													<img src="../images/icon/avatar-01.jpg" alt="***" />
												</div>
												<div class="content">
													<a class="js-acc-btn" href="#">***</a>
												</div>
												<div class="account-dropdown js-dropdown">
													<div class="info clearfix">
														<div class="image">
															<a href="#">
																<img src="../images/icon/avatar-01.jpg" alt="***" />
															</a>
														</div>
														<div class="content">
															<h5 class="name">
																<a href="#">***</a>
															</h5>
															<span class="email">johndoe@example.com</span>
														</div>
													</div>
													<div class="account-dropdown__body">
														<div class="account-dropdown__item">
															<a href="#">
																<i class="zmdi zmdi-account"></i>Account</a>
														</div>
														<div class="account-dropdown__item">
															<a href="#">
																<i class="zmdi zmdi-settings"></i>Setting</a>
														</div>
														<div class="account-dropdown__item">
															<a href="#">
																<i class="zmdi zmdi-money-box"></i>Billing</a>
														</div>
													</div>
													<div class="account-dropdown__footer">
														<a href="#">
															<i class="zmdi zmdi-power"></i>Logout</a>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</header>
					<!-- HEADER DESKTOP-->

					<!-- MAIN CONTENT-->
					<div class="main-content" style="  padding: 0px;">
						<div class="section__content ">
							<div class="container-fluid">
								<div class="row" style="display: flex;">

									<div class="col-lg-3">
										<div class="card">
											<div class="card-header">
												<strong>flex</strong>元素练习
											</div>
											<div class="card-body card-block">
												<form action="" method="post" enctype="multipart/form-data" class="form-horizontal">






													<div class="row form-group">
														<div class="col col-md-12">
															<label for="password-input" class=" form-control-label" style="text-align: right;">flex-direction</label>
														</div>
														<div class="col-12 col-md-12">

															<select name="select" id="select-border-style" class="form-control">
																<option value="0">Please select</option>
																<option value="1">row </option>
																<option value="2"> row-reverse </option>
																<option value="3">column </option>
																<option value="4">column-reverse </option>
															</select>

														</div>
													</div>
													<div class="row form-group">
														<div class="col col-md-12">
															<label for="password-input" class=" form-control-label" style="text-align: right;">flex-wrap</label>
														</div>
														<div class="col-12 col-md-12">

															<select name="select" id="select-border-top" class="form-control">
																<option value="0">Please select</option>
																<option value="1">nowrap </option>
																<option value="2"> wrap  </option>
																<option value="3">wrap-reverse</option>
																 
															</select>

														</div>
													</div>
													 
													<div class="row form-group">
														<div class="col col-md-12">
															<label for="password-input" class=" form-control-label" style="text-align: right;">justify-content</label>
														</div>
														<div class="col-12 col-md-12">

															<select name="select" id="select-border-bottom" class="form-control">
																<option value="0">Please select</option>
																<option value="1">flex-start</option>
																<option value="2">  flex-end </option>
																<option value="3">center </option>
																<option value="4">space-between</option>
																	<option value="5">space-around</option>
															</select>
														</div>
													</div>
													<div class="row form-group">
														<div class="col col-md-12">
															<label for="password-input" class=" form-control-label" style="text-align: right;">align-items</label>
														</div>
														<div class="col-12 col-md-12">

															<select name="select" id="select-border-left" class="form-control">
																<option value="0">Please select</option>
																<option value="1">flex-start</option>
																<option value="2">  flex-end </option>
																<option value="3">center </option>
																<option value="4">baseline </option>
																	<option value="5">stretch</option>
															</select>
														</div>
													</div>
													<div class="row form-group">
														<div class="col col-md-12">
															<label for="password-input" class=" form-control-label" style="text-align: right;">align-content</label>
														</div>
														<div class="col-12 col-md-12">

															<select name="select" id="select-border-left" class="form-control">
																<option value="0">Please select</option>
																<option value="1">flex-start</option>
																<option value="2">  flex-end </option>
																<option value="3">center </option>
																<option value="4">space-between </option>
																<option value="5">space-around</option>
																	<option value="6">stretch</option>
															</select>
														</div>
													</div>
													<div class="row form-group">
														<div>
															<a href=""><img src="../images/game.png" width="90%"></a>
														</div>
													</div>
												</form>
											</div>

										</div>

									</div>
									<div class="col-lg-9">
										<div class="card">
											<div class="card-header">
												<strong>flex</strong>显示效果
											</div>
											<div class="card-body card-block  box_con">
												<div class="clearfix">
													<div id="flex_exzample" class="flex_exzample">
														 <div>1.逆行者军人</div>
														 <div>2.中华民族在面对灾难的时刻，团结一致、共同抵御、战胜灾害。</div>
														 <div>3.坚持以人民为中心的发展思想，这是习近平总书记情到深处、自然而然的一种思想流露，同时它也充分地体现了习近平新时代中国特色社会主义思想。在“为民”这个大的主题之下，习近平总书记身体力行、切实为百姓做实事。</div>
														 <div>4.中国的传统文化当中，特别是儒家文化中，一直强调“仁”这个字，仁政的思想也成为中国传统政治文化当中的优秀基因。在习近平总书记的治国理政思想当中，</div>
														 <div>5.中国的传统文化，非常重视立德修身。习近平总书记十分重视立德的问题，关于为什么立德，他曾经讲“国无德不兴，人无德不立”。</div>
														 
													</div>
													 
												</div>
												 
											</div>

										</div>

									</div>

								</div>
								<div class="row">
									<div class="col-md-12">
										<div class="copyright">
											<p>Copyright &copy; 2020.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

			</div>

		</div>

		<!-- Jquery JS-->
		<script src="../vendor/jquery-3.2.1.min.js"></script>
		<!-- Bootstrap JS-->
		<script src="../vendor/bootstrap-4.1/popper.min.js"></script>
		<script src="../vendor/bootstrap-4.1/bootstrap.min.js"></script>
		<!-- Vendor JS       -->
		<script src="../vendor/slick/slick.min.js">
		</script>
		<script src="../vendor/wow/wow.min.js"></script>
		<!-- <script src="../vendor/animsition/animsition.min.js"></script> -->
		<script src="../vendor/bootstrap-progressbar/bootstrap-progressbar.min.js">
		</script>
		<script src="../vendor/counter-up/jquery.waypoints.min.js"></script>
		<script src="../vendor/counter-up/jquery.counterup.min.js">
		</script>
		<script src="../vendor/circle-progress/circle-progress.min.js"></script>
		<script src="../vendor/perfect-scrollbar/perfect-scrollbar.js"></script>
		<script src="../vendor/chartjs/Chart.bundle.min.js"></script>
		<script src="../vendor/select2/select2.min.js"></script>

		<!-- Main JS-->
		<script src="../js/main.js"></script>
		<script src="../js/jquery.bigcolorpicker.min.js"></script>
		<script src="../js/box.js"></script>
	</body>

</html>
<!-- end document-->
